<template>
    <div>
      <ul class="weekdays">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
        <li>日</li>
      </ul>
      <div>
        {{this.times}}
      </div>
      <!--<ul class="days">-->
        <!--<li @click="pick(day)" v-for="day in days">-->
          <!--&lt;!&ndash;今天&ndash;&gt;-->
          <!--<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>-->
          <!--<span v-else>-->
   <!--&lt;!&ndash;今天&ndash;&gt;-->
   <!--<span :class="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()? 'active':''">{{ day.getDate() }}</span>-->
            <!--&lt;!&ndash;<span :class="name? 'active':''">{{ day.getDate() }}</span>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="">{{ day.getDate() }}</span>&ndash;&gt;-->
   <!--</span>-->
        <!--</li>-->
      <!--</ul>-->
    </div>
</template>

<script>
    export default {
        name: "CalendarWeekend",
      props:{
        time:{}
      },
      data(){
        return{
          days: [],
          name:false,
          times:new Date(),
          currentDay: 1,
          currentMonth: 1,
          currentYear: 1970,
          currentWeek: 1,
        }
      },
      methods:{
          getWeek(){
            this.currentDay = this.times.getDate();
            this.currentYear = this.times.getFullYear();
            this.currentMonth = this.times.getMonth() + 1;
            this.currentWeek = this.times.getDay(); // 1...6,0
            var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
            console.log('子级')
            console.log(str)
          },
        formatDate: function(year,month,day){
          var y = year;
          var m = month;
          if(m<10) m = "0" + m;
          var d = day;
          if(d<10) d = "0" + d;
          return y+"-"+m+"-"+d
        },
      },
      mounted() {
          this.getWeek()
      },
      watch:{
          time(){
              if (this.time){
                this.times = this.time
                this.getWeek()
              } else {
              }
          }
      }
    }
</script>

<style scoped>
  * {
    box-sizing: border-box;
    touch-action: pan-y;
  }

  ul {
    list-style-type: none;
  }


  .month ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }

  .month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  .weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #00B8EC;
    display: flex;
    flex-wrap: wrap;
    color: #FFFFFF;
    justify-content: space-around;
  }

  .weekdays li {
    display: inline-block;
    width: 13.6%;
    text-align: center;
  }

  .days {
    padding: 0;
    background: #FFFFFF;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .days li {
    list-style-type: none;
    display: inline-block;
    width: 14.2%;
    text-align: center;
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: .3rem;
    color: #000;
  }

  .days li .active {
    padding: 6px 6px;
    border-radius: 50%;
    background: #00B8EC;
    color: #fff;
  }

  .days li .other-month {
    padding: 5px;
    color: gainsboro;
  }

  .days li:hover {
    background: #e1e1e1;
  }

</style>
